<template>
  <div id="search-panel">
    <!--<div>-->
      <!--<span class="warnfont">报警信息</span>-->
      <!--<span class="warn">{{warnCount}}</span>-->
      <!--&lt;!&ndash;<WarnPanel v-if="isWarnShow"/>&ndash;&gt;-->
    <!--</div>-->
    <div class="type">
      <div :class="['car-type-bottom',!isReactive?'disabled':'']" @click="setPopShow()">
        <span>{{curCarType}}</span>
        <i :class="[isMainPopShow?'up':'down','tog-icon']"></i>
      </div>
      <ul class="type-box" v-if="isMainPopShow">
        <li v-for="car in carList" :key="car.id" :class="{active:car.name===curCarType}" @click="setCarType(car)">
          {{car.name}}
        </li>
      </ul>
    </div>
    <div class="input" v-if="home_state !=='history_hotMap'">
      <input type="text" v-model="inputText" :placeholder="defaultText" @focus="hidePop()" :disabled="home_state ==='realtime_single'||home_state ==='history_single'">
      <i class="icon s-icon" @click="getSearchResult()" v-if="!inputText"></i>
      <i class="icon c-icon" @click="clearInputText()" v-if="inputText"></i>
      <SearchCarResult v-if="isPanelShow" :singleList="singleCarList" :groupList="groupCarList" @clickCar="getSingleCar"/>
    </div>

    <div class="exitBtn" @click="exitToHome" v-if="home_state ==='company_group'">退出</div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import MYCONF from '../../myconf';
  import env from '../../util/env'
  // import WarnPanel from '../sub-home/warnPanel.vue'
  import SearchCarResult from '../sub-home/searchCarResult'
  import eventBus from '../../util/event-bus'

  export default {
    name: 'SearchPanel',
    data() {
      return {
        warnCount: 14,
        carType: '全部车辆',
        defaultText: '搜索车辆ID,车辆公司名称...',
        /*isPopShow: false,*/
        /*isWarnShow:false,*/
        inputText: '',
        // curCarType: '全部车辆',
        carList: [{
          type:0,
          id: 'all',
          name: '全部车辆'
        }, {
          type:1,
          id: 'chuzu',
          name: '出租车'
        }, {
          type:2,
          id: 'gongjiao',
          name: '公交车'
        }, {
          type:3,
          id: 'keche',
          name: '班线客车'
        }, {
          type:4,
          id: 'lvyou',
          name: '旅游包车'
        }, {
          type:5,
          id: 'weixian',
          name: '危险货车'
        }, {
          type:6,
          id: 'putong',
          name: '普通货车'
        }
        ],
        singleCarList: [],
        groupCarList: [],
        isPanelShow:false
      }
    },
    mounted() {
      eventBus.$on("exitRealTrack",() => {
        this.inputText = '';
      });
    },
    computed: {
      ...mapGetters(['home_state','car_type','single_car','company_info','isMainPopShow','cur_nav',]),
      curCarType: function() {
        return this.car_type.name;
      },
      isReactive: function() {
        return this.home_state === 'realtime' || this.home_state === 'history_hotMap'
      }
    },
    components: {
      SearchCarResult
    },
    methods: {
      ...mapMutations(['updateCarType','updateHomeState','updateSingleCar','updateCompanyInfo','updateIsMainPopShow','updateIsNavShow']),
      setCarType(car) {
        // this.curCarType = car.name;
        this.updateCarType(car);
        this.updateIsMainPopShow(false);
       // this.isPopShow = false;
      },
      setPopShow() {
        if(this.isReactive) {
          this.updateIsMainPopShow(!this.isMainPopShow);
        }
        if(this.cur_nav != 0){
          this.updateIsNavShow(false)
        }
          //this.isPopShow = !this.isPopShow;
      },
      hidePop() {
       // this.isPopShow = false;
        this.updateIsMainPopShow(false);
      },
      getSearchResult() {
        this.singleCarList = [{
          id:'甘H81545'
        },{
          id:'甘HF8192'
        },{
          id:'甘H81105'
        }];
        this.groupCarList = [{
          id:'11',
          name:'武威市安吉危货运输服务有限责任公司'
        },{
          id:'1',
          name:'武威市万里出租客运有限公司'
        }];
        this.isPanelShow = true;
      },
      setSearchRequest(){
        // if(this.inputText.length > 3){
          let single_url = MYCONF.service.searchSingleCar+this.inputText;
          this.$http.get(single_url)
            .then(response => {
              response = response.body;
              this.singleCarList = response.data;
              console.log(response);
            }, response => {
            });
        // }
        let company_url = MYCONF.service.searchCompany+this.inputText;
        this.$http.get(company_url)
          .then(response => {
            response = response.body;
            this.groupCarList = response.data;
            console.log(response);
          }, response => {
          });

        this.isPanelShow = true;
      },
      getSingleCar(data) {
        let _this = this;
        setTimeout(() => {
          _this.isPanelShow = false;
        },200)
        if(data.type === 'singleCar'){
          this.inputText = data.info.id;
          this.updateHomeState('realtime_single');
          this.updateSingleCar(data.info);
        }else{
          this.inputText = data.info.name;
          this.updateHomeState('company_group');
          this.updateCompanyInfo(data.info);
        }
      },
      clearInputText(){
        this.inputText = '';
        this.singleCarList = [];
        this.groupCarList = [];
        this.isPanelShow = false;
        this.updateHomeState('realtime');
      },
      exitToHome(){
        this.updateHomeState('realtime');
        this.updateCompanyInfo({
          id:'',
          name:''
        });
        this.inputText = ''
      }
    },
    watch:{
      inputText(newVal, oldVal){
        if(newVal!==oldVal){
          if(newVal !== ''){
            this.setSearchRequest();
          }else{
            this.singleCarList = [];
            this.groupCarList = [];
            this.isPanelShow = false;
          }
        }
      },
      isMainPopShow : function (newVal,oldVal) {
        if(newVal){
          this.inputText = '';
          env.popups.map((item) => {
            item.remove();
          })
        }
      },
      home_state: function(newValue, oldValue) {
        //this.isPopShow = false;
        this.updateIsMainPopShow(false);
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../static/common/common.scss";

  input::-webkit-input-placeholder {
    color: #ececec;
  }

  input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #ececec;
  }

  input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #ececec;
  }

  input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #ececec;
  }

  #search-panel {
    pointer-events: auto;
    position: absolute;
    top: 0px;
    right: 0px;
    min-width: 526px;
    height: 40px;
    text-align: right;

    & > div {
      display: inline-block;
      vertical-align: middle;
      min-width: 120px;
      padding: 0 2px;
      height: 100%;
      @include borderBlur;
      line-height: 38px;
      font-size: $font-mid;
      /*.warnfont{
        cursor: pointer;
      }*/
      .warn {
        color: $color-warn;
        margin-left: 6px;
        /*cursor: pointer;*/
      }
      .tog-icon {
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 30px;
        background: url("../../../static/images/index/tog-down.png") no-repeat center;
        background-size: 16px 14px;
        transform: rotate(360deg);
        transition: all ease 0.3s;
        &.up {
          transform: rotate(180deg);
          transition: all ease 0.3s;
        }
      }
      &.type {
        position: relative;

        .car-type-bottom {
          cursor: pointer;
          &.disabled{
            cursor: default;
            opacity: 0.5;
          }
        }
      }
      &.input {
        width: 280px;
        position: relative;
        text-align: left;
        input {
          width: 255px;
          height: 40px;
          padding: 0 14px;
          box-sizing: border-box;
          border: none;
          background: transparent;
          outline: none;
          color: #fff;
          font-size: $font-normal;
        }
        .icon {
          width: 40px;
          height: 100%;
          position: absolute;
          top: 0;
          right: 0;
          background-size: 24px 24px;
          cursor: pointer;
          &.s-icon{
            background: url("../../../static/images/index/s-icon.png") no-repeat center;
          }
          &.c-icon{
            background: url("../../../static/images/index/clear-icon.png") no-repeat center;
          }
        }
      }
      .type-box {
        list-style: none;
        padding: 0;
        background: #191e30;
        //background:#4A8074;
        border: 2px solid #438eae;
        min-width: 100%;
        li {
          text-align: left;
          font-size: $font-mid;
          text-indent: 10px;
          line-height: 40px;
          cursor: pointer;
          border-top: 2px solid transparent;
          border-bottom: 2px solid transparent;
          &.active, &:hover {
            background: #1f2b58;
           // background: #49beef;
            border-top: 2px solid #438eae;
            border-bottom: 2px solid #438eae;
            &:first-child {
              border-top: 2px solid transparent;
            }
            &:last-child {
              border-bottom: 2px solid transparent;
            }
          }
        }
      }
    }

    .exitBtn{
      @include borderBlur;
      position: absolute;
      top: 120px;
      right: 360px;
      text-align: center;
      padding: 5px;
      min-width: 60px;
      cursor: pointer;
    }
  }

</style>
